<template>
<view class="container detail-white">
	<!-- 作业标题 -->
	<view class="task-item-header">
		<view class="task-item-info">
			<view class="task-item-type">
				<text class="iconfont icon-book large"></text>
			</view>
			<view class="task-item-describe sec-left">
				<view class="task-item-date">
					<text>4月26日</text>
					<text class="sec-left">历史</text>
				</view>
				<view class="task-item-author">
					<text>王老师</text>
					<text class="sec-left">发布于</text>
					<text>周日 12:06</text>
				</view>
			</view>
		</view>
		<view class="task-item-status">
			<text>未提交</text>
		</view>
	</view>
	<!-- 作业内容 -->
	<view class="detail-content sec-top">
		<rich-text :nodes="content" />
	</view>
	<!-- 提交内容 -->
	<view class="detail-content sec-top">
		<view class="task-item-info border">
			<view class="task-item-type">
				<text class="iconfont icon-edit large"></text>
			</view>
			<view class="task-item-describe sec-left">
				<view class="task-item-date">
					<text>提交内容</text>
				</view>
			</view>
		</view>
		<view class="empty-text sec-top">还没有提交内容哦～</view>
		<!-- <view class="sec-top">
			<rich-text :nodes="content" />
		</view> -->
	</view>
	<!-- 操作 -->
	<uni-fab ref="fab"
		:pattern="pattern"
		horizontal="right"
		vertical="bottom"
		direction="horizontal"
		:content="actions"
		@trigger="onTrigger" />
	<!-- 发图文	 -->
	<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
		<view class="publish-pop">
			<view class="publish-header">
				<text class="iconfont icon-close" @click="onClose"></text>
				<text class="publish-text" @click="onPublish">发布</text>
			</view>
			<view class="publish-body">
				<textarea class="publish-textarea"
					:maxlength="-1"
					:focus="true"
					placeholder="请输入解答内容" />
			</view>
			<view class="publish-image-area">
				<uni-grid :column="3"
					:showBorder="false">
					<block>
						<uni-grid-item class="publish-image-item">
							<view class="border-dashed"
								@click="onUpload">
								<uni-icons size="48" type="plusempty" color="#cccccc" />
							</view>
						</uni-grid-item>
					</block>
				</uni-grid>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script>
export default {
	data() {
		return {
			pattern: {
				color: '#007AFF',
				backgroundColor: '#FFFFFF'
			},
			actions: [
				// #ifdef APP-PLUS
				{
					iconPath: '/static/camera_ac.png',
					type: 'camera',
					text: '拍照'
				},
				// #endif
				{
					iconPath: '/static/video_ac.png',
					type: 'video',
					text: '小视频'
				},
				{
					iconPath: '/static/upload_ac.png',
					type: 'file',
					text: '发文件'
				},
				{
					iconPath: '/static/upload_ac.png',
					type: 'content',
					text: '发图文'
				}
			],
			content: '<p style="padding-bottom: 8px; font-size: 14px; text-indent: 2em; text-align: justify;">通过应用信息科技和互联网技术进行内容传播和快速学习的方法。E-Learning的“E”代表电子化的学习、有效率的学习、探索的学习、经验的学习、拓展的学习、延伸的学习、易使用的学习、增强的学习。美国是e-Learning的发源地，有60%的企业通过网络的形式进行员工培训。1998年以后，e-Learning在世界范围内兴起，从北美、欧洲迅速扩展到亚洲地区。越来越多的国内企业对 e-Learning表示了浓厚兴趣，并开始实施e-Learning解决方案。</p>'
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onPublish() {
			this.onClose();
		},
		onClose() {
			this.$refs.popup.close();
		},
		onTrigger(e) {
			let index = e.index;
			this.onAction(this.actions[index].type);
		},
		onAction(action) {
			switch(action) {
				case 'camera':
				case 'video':
				case 'file':
					uni.chooseVideo({
						camera: 'back',
						success: (res) => {
							
						},
						fail: (err) => {
							
						},
						complete: (res) => {
							
						}
					});
					break;
				default:
					this.$refs.fab.close();
					this.$refs.popup.open();
					break;
			}
		},
		onUpload() {
			uni.chooseImage({
				count: 9,
				success: (res) => {
					console.log('res: ', res);
				},
				fail: (err) => {
					
				},
				complete: (res) => {
					
				}
			});
		}
	}
}
</script>
